<template>
  <div class="container booking-detail">
    <!-- <cube-scroll> -->
    <div class="section section1 clearfix">
      <div class="top clearfix">
        <span class="left">预约编号：{{detail.orderId}}</span>
        <span class="right" v-if="detail.orderStatus == 0">待使用</span>
        <span class="right" v-if="detail.orderStatus == 0">预约中</span>
        <span class="right" v-if="detail.orderStatus == 0">预约关闭</span>
        <span class="right" v-if="detail.orderStatus == 0">已关闭</span>
        <span class="right" v-if="detail.orderStatus == 0">退款中</span>
        <span class="right" v-if="detail.orderStatus == 0">已退款</span>
      </div>
      <div class="bottom clearfix">
        <div class="left">
          <img :src="imgUrl+detail.groupMasterImg" alt />
        </div>
        <div class="right">
          <div class="content">
            <h3>{{detail.projectName}}</h3>
            <p>{{detail.hospitalName}}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="btnbox">
      <button class="hexiao" v-if="detail.checkedStatus == 0" @click="hxBtn">项目核销</button>
      <!-- <button class="close" v-if="detail.appointStatus == 1" @click="showBtn">关闭订单</button> -->
       <button class="close" @click="showBtn">关闭订单</button>
    </div>
    <div class="section section2">
      <div class="section-item">
        <div class="left">预约日期：</div>
        <div class="right">
          <p>{{detail.appointmentDate}}</p>
        </div>
      </div>

      <!-- 此处修改 -->
      <div class="section-item">
        <div class="left">项目类型：</div>
        <div class="right">拼团</div>
      </div>

      <div class="section-item">
        <div class="left">客户姓名：</div>
        <div class="right">
          <p>{{detail.userName}}</p>
        </div>
      </div>

      <div class="section-item">
        <div class="left">客户手机：</div>
        <div class="right">
          <p>{{detail.userPhone}}</p>
        </div>
      </div>

      <div class="section-item">
        <div class="left">上级姓名：</div>
        <div class="right">
          <p>{{detail.refereeName}}</p>
        </div>
      </div>

      <div class="section-item">
        <div class="left">上级手机：</div>
        <div class="right">
          <p>{{detail.refereePhone}}</p>
        </div>
      </div>
    </div>
    <!-- <cube-button @click="showBtn">Dialog - btn</cube-button> -->
  </div>
</template>

<script>
import { Toast, MessageBox } from "mint-ui";
import  api from '../../assets/js/apiPt'
export default {
  data() {
    return {
      id: "",
      detail: {},
      hospitalid: ""
    };
  },
  methods: {
    getDetail() {
      this.axios
        .post(
          "/api/com.mmk.groupservice.api.AdminGroupOrderProvider/1.0.0/getOrderInfo.html",
          {
            orderId: this.id
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            this.detail = res.data.data;
            // console.log(this.detail )
          }
        });
    },
    // 核销按钮
    hxBtn() {
      this.$router.push({
        path: "/hx",
        query: { orderId: this.detail.orderId, hospitalid: this.hospitalid }
      });
    },
    //关闭订单
    showBtn() {
      this.$createDialog({
        type: "confirm",
        icon: "",
        title: "提示",
        content: "确认用户不做原项目？",
        confirmBtn: {
          text: "是",
          active: true,
          disabled: false,
          href: "javascript:;"
        },
        cancelBtn: {
          text: "否",
          active: false,
          disabled: false,
          href: "javascript:;"
        },
        onConfirm: () => {
          this.$createDialog({
            type: "confirm",
            icon: "",
            title: "提示",
            content: "用户是否做其他项目？",
            confirmBtn: {
              text: "是",
              active: true,
              disabled: false,
              href: "javascript:;"
            },
            cancelBtn: {
              text: "否",
              active: false,
              disabled: false,
              href: "javascript:;"
            },
            onConfirm: () => { 
                this.$router.push({
                  path: "/pt_sdan",
                  query: {
                    hospital: this.detail.hospitalName,
                    hos_id: this.hospitalid,
                    orderId: this.detail.orderId,
                    isClosed:1
                  }
                });
            },
            onCancel: () => {
              this.closeOrder(); //关闭订单
            }
          }).show();
        },
        onCancel: () => {}
      }).show();
    },
    closeOrder() {
      this.axios
        .post(
          "api/com.mmk.groupservice.api.AdminGroupOrderProvider/1.0.0/closeOrder.html",
          {
            id: this.id.toString()
          }
        )
        .then(res => {
          // console.log(res)
          if (res.data.code == 0) {
            Toast({
              message: res.data.msg,
              position: "bottom",
              duration: 2000
            });
            setTimeout(() => {
              this.$router.go(-1);
            }, 1500);
          }
        });
    }
  },
  created() {
    this.axios.defaults.baseURL = api
    document.title = "预约单详情";
    this.id = location.hash.split(":")[1].split("?")[0]; //订单id
    this.hospitalid = location.hash.split("?")[1].split("=")[1];
    // console.log(this.hospitalid)   
    this.getDetail();
  
    // let that = this
  },
};
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  overflow-y: auto;
  background-color: rgba(204, 204, 204, 0.2018);
  .section {
    width: 100%;

    padding: 0 15px;
    background-color: #fff;
  }
  .section1 {
    padding-bottom: 15px;
    .top {
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid rgba(204, 204, 204, 0.2999);
      color: #666;
      .left,
      .right {
        height: 100%;
        font-size: 14px;
        color: #666;
      }
      .left {
        float: left;
        .tip {
          font-size: 12px;
          font-family: "PingFangSC-Regular";
          font-weight: 400;
          color: rgba(246, 70, 101, 1);
        }
      }
      .right {
        float: right;
      }
    }
    .bottom {
      padding-top: 15px;
      display: flex;
      min-height: 120px;
      .left {
        background-color: #ccc;
        float: left;
        flex: 1;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .right {
        position: relative;
        float: right;
        min-height: 100%;
        background: rgba(204, 204, 204, 0.1);
        flex: 2;
        .content {
          width: 100%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          text-align: center;
          h3 {
            font-size: 17px;
            font-weight: bold;
            color: #666;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          p {
            font-size: 14px;
          }
        }
      }
    }
    .delete-btn {
      width: 97px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      display: block;
      border-radius: 15px;
      border: 1px solid rgba(151, 151, 151, 1);
      float: right;
      margin: 15px 0 0;
    }
  }

  .section2,
  .section3 {
    .section-item {
      min-height: 50px;
      line-height: 50px;
      border-bottom: 1px solid rgba(204, 204, 204, 0.2999);
      display: flex;
      .left {
        flex: 5.5;
        text-align: justify;
        text-align-last: justify;
      }
      .right {
        flex: 7;
      }
    }
    .remark {
      margin-bottom: 10px;
      .title {
        font-size: 17px;
        font-family: "PingFangSC-Medium";
        font-weight: 500;
        color: rgba(102, 102, 102, 1);
        line-height: 50px;
      }
      .notice {
        width: 345px;
        min-height: 120px;
        border: 1px solid rgba(204, 204, 204, 0.2996);
        font-size: 17px;
        font-family: "PingFangSC-Regular";
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        line-height: 24px;
        padding: 10px;
        box-sizing: border-box;
      }
    }
  }

  .section3 {
    .cube-checkbox-group {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
    }
  }
  .btnbox {
    width: 100%;
    height: 47px;
    background: #fff;
    margin-bottom: 10px;
    padding-left: 37%;
    box-sizing: border-box;
    position: relative;
    .hexiao,
    .close,
    .sdanbtn {
      width: 97px;
      height: 32px;
      border-radius: 16px;
      border: 1px solid rgba(151, 151, 151, 1);
      background: #fff;
      color: #666;
      margin: 0;
      font-size: 14px;
    }
    .hexiao {
      margin-right: 20px;
    }
    .sdanbtn {
      position: absolute;
      right: 16px;
    }
  }

  //字体颜色
  .red-font {
    color: rgba(255, 56, 62, 1);
  }
  .orange-font {
    color: rgba(255, 126, 27, 1);
  }
}
</style>

<style lang="less">
.booking-detail {
  .booking-detail .cube-checkbox-ui {
    background-color: #fff !important;
  }
  .cube-checkbox .cubeic-square-right {
    color: #fff !important;
  }
  .cube-checkbox_checked .cubeic-square-right {
    color: #ccc !important;
  }

  .border-bottom-1px::after,
  .border-top-1px::before {
    display: none !important;
  }
}
.mint-msgbox-btn {
  border-radius: 0;
  background: #fff;
  color: #666;
}
.mint-msgbox-confirm {
  color: #ff383e;
}
.mint-msgbox-message {
  font-size: 16px;
  font-weight: 700;
  color: #333;
}
.mint-msgbox {
  width: 72%;
  // height: 150px;
}
.cube-dialog-btn_highlight {
  color: #ff383e !important;
}
</style>



